<template>
  <div class="p-3">
    <a-table
      :columns="columns"
      row-key="id"
      :data-source="pageData"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ x: true }"
      class="break-words"
    >
      <template #bodyCell="{ column, record }">
        <ExamineStatus
          v-if="column.key === 'oper'"
          :record="record"
          :update-action="reviewOffline"
          :refresh-pagination="refreshPagination"
        >
          <template #prefix>
            <a-button type="primary" @click="showDetail">查看</a-button>
          </template>
        </ExamineStatus>
      </template>
    </a-table>
    <a-drawer v-model:visible="drawerVisible" :title="drawerTitle" placement="right"> </a-drawer>
  </div>
</template>
<script lang="ts" setup>
import dayjs from "dayjs";
import { onMounted, ref } from "vue";
import { getUserDynamics, reviewOffline } from "/@/api/manage/userContent";
import { usePagination } from "/@/hooks/web/usePagination";
import { DATETIME_FORMAT_STR } from "/@/utils/common";
import ExamineStatus from "/@/components/ExamineStatus.vue";

const columns = [
  {
    title: "动态ID",
    dataIndex: "id",
  },
  {
    title: "动态内容",
    dataIndex: "dynamicsContent",
  },
  {
    title: "图片",
    dataIndex: "dynamicsUrl",
  },
  {
    title: "用户ID",
    dataIndex: "userId",
  },
  {
    title: "用户昵称",
    dataIndex: "nickName",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "发布时间",
    dataIndex: "releaseTime",
    customRender({ text }) {
      return dayjs(text).format(DATETIME_FORMAT_STR);
    },
  },
  {
    title: "操作",
    key: "oper",
  },
];
const { refreshPagination, pagination, pageData, loading } = usePagination(getUserDynamics);
onMounted(() => {
  refreshPagination();
});
//查看
const drawerVisible = ref(false);
const drawerTitle = ref("");
function showDetail(record) {
  drawerTitle.value = `${record.name}详细信息`;
  drawerVisible.value = true;
}
</script>
<style lang="less"></style>
